<template>
  <div class="page-container">
    <div class="reverse-price-content">
      <div class="reverse-price-banner">
        <div class="logo-title-wrapper">
          <div class="title">反向写价格</div>
          <div
            class="status"
            :class="{ close: !serviceConfig.status || serviceConfig.status == 0 }"
            :style="{ width: serviceStatusText.length == 3 ? '61px' : '72px' }"
          >
            {{ serviceStatusText }}
          </div>
        </div>
        <div class="text"> 通过启程设置车型在OTA的价格，并批量反写至对应渠道中 </div>
        <!-- 试用信息和开通信息 -->
        <div v-if="[1, 2].includes(serviceConfig.status)" class="open-text">{{ openInfoText }}</div>
        <!-- 操作按钮 -->
        <a-button type="primary" v-if="!serviceConfig.status || serviceConfig.status == 0">请联系运营人员了解详情</a-button>
        <a-button type="primary" v-permission="'svms:business:price:car-model'" v-else @click="goTo">前往【价格配置】</a-button>
      </div>
      <!-- 功能亮点 -->
      <div class="reverse-price-functions" :style="{ 'padding-top': [1, 2].includes(serviceConfig.status) ? '28px' : 0 }">
        <a-tabs class="custom-tabs">
          <a-tab-pane key="1" title="功能亮点">
            <div class="title">
              <img class="icon" src="/static/images/writeprice/feature_highlights.png" />
            </div>
            <div class="features">
              <a-row :gutter="{ lg: 10, xl: 30, xxl: 90 }">
                <a-col span="8" v-for="(item, index) in feature_highlights" :key="index">
                  <div class="feature-item">
                    <img class="icon" :src="item.icon" />
                    <div class="title">{{ item.title }}</div>
                    <div class="desc">{{ item.desc }}</div>
                  </div>
                </a-col>
              </a-row>
            </div>
          </a-tab-pane>
          <a-tab-pane key="2" title="展示图">
            <div class="title">
              <img class="icon" src="/static/images/writeprice/display_drawing.png" />
            </div>
            <div class="display-drawing">
              <div class="display-drawing-item" v-for="(item, index) in display_drawing" :key="index">
                <img class="icon" :src="item.icon" />
              </div>
            </div>
          </a-tab-pane>
        </a-tabs>
      </div>
    </div>
  </div>
</template>

<script setup>
  import { ref, onMounted, computed } from 'vue'
  import { useRouter } from 'vue-router'
  import { channelPriceSync } from '@/api/finance/reversePriceWriting'
  const router = useRouter()
  // 服务详情
  const serviceConfig = ref({})
  const getServiceConfig = () => {
    channelPriceSync({}).then((res) => {
      const result = res.result
      serviceConfig.value = result
    })
  }

  // 功能亮点
  const feature_highlights = [
    {
      icon: '/static/images/writeprice/feature_highlights_1.png',
      title: '车型价格多渠道批量修改',
      desc: '支持在启程批量设置车型在携程、飞猪、哈啰、悟空的平日价、周末价、节假日价格、自定义时段价格',
    },
    {
      icon: '/static/images/writeprice/feature_highlights_2.png',
      title: '车型价格多渠道批量反写',
      desc: '设定价格后，根据门店、车型、渠道、价格类型，一键反写至所选渠道',
    },
    {
      icon: '/static/images/writeprice/feature_highlights_3.png',
      title: '车型价格反写结果查询',
      desc: '反写完成后，支持查看反写结果，失败支持重新操作',
    },
  ]

  // 展示图
  const display_drawing = [
    {
      icon: '/static/images/writeprice/display_drawing_1.png',
    },
    {
      icon: '/static/images/writeprice/display_drawing_2.png',
    },
    {
      icon: '/static/images/writeprice/display_drawing_3.png',
    },
  ]

  // 状态文本
  const serviceStatusText = computed(() => {
    const status = serviceConfig.value.status
    const text = !status || status == 0 ? '暂未开通' : status == 1 ? '已开通' : '试用中'
    return text
  })

  // 开通信息文本
  const openInfoText = computed(() => {
    const status = serviceConfig.value.status
    if (status == 1) return `开通时间：${serviceConfig.value.openTime}`
    else {
      return `免费试用时间：${serviceConfig.value.trialStart}至${serviceConfig.value.trialEnd}`
    }
  })

  const goTo = () => {
    router.push({ path: '/business/price/car-model' })
  }

  onMounted(() => {
    getServiceConfig()
  })
</script>

<style lang="less" scoped>
  .page-container {
    height: 100%;
    .reverse-price-content {
      min-height: 100%;
      background: linear-gradient(135deg, rgba(225, 244, 254, 0.22) 0%, #ffffff 100%);
      .reverse-price-banner {
        display: flex;
        justify-content: flex-start;
        flex-direction: column;
        align-items: flex-start;
        width: 100%;
        height: 214px;
        padding: 52px 0 0 40px;
        background-image: url('/static/images/writeprice/banner_background.png') !important;
        background-size: 100% 100%;

        .logo-title-wrapper {
          position: relative;
          .title {
            font-weight: 600;
            font-size: 28px;
            color: #1d2129;
            line-height: 28px;
          }
          .status {
            width: auto;
            height: 24px;
            line-height: 24px;
            padding: 0px 11px 0 8px;
            font-weight: 600;
            font-size: 14px;
            color: #ffffff;
            background: linear-gradient(222deg, #ff7a66 0%, #ff5b60 100%);
            border-radius: 8px 12px 12px 8px;
            position: absolute;
            top: -8px;
            left: calc(100% - 8px);
          }
          .close {
            color: #919aa5;
            padding-right: 8px;
            background: linear-gradient(222deg, #f2f3f5 0%, #dbdbdb 100%);
          }
        }
        .text {
          font-weight: 400;
          font-size: 14px;
          color: #919aa5;
          margin: 14px 0 24px 0;
        }
        .open-text {
          height: 22px;
          font-size: 14px;
          color: #f53f3f;
          line-height: 22px;
          margin: 0 0 10px;
        }
      }
      .reverse-price-functions {
        padding: 0 24px;
        .title {
          text-align: center;
          margin: 10px 0 24px;
          img {
            height: 27px;
          }
        }
        .custom-tabs {
          :deep(.arco-tabs-nav::before) {
            background-color: #f2f3f5;
          }
        }
        .features,
        .display-drawing {
          display: flex;
          justify-content: space-around;
          text-align: center;
        }
        .feature-item {
          padding: 0 40px;
          @media (max-width: 1280px) {
            padding: 0 20px;
          }
          .icon {
            width: 56px;
            height: 56px;
          }
          .title {
            line-height: 22px;
            font-weight: 600;
            font-size: 16px;
            color: #1d2129;
            margin: 8px 0 6px;
          }
          .desc {
            font-weight: 400;
            font-size: 14px;
            color: #919aa5;
            line-height: 22px;
          }
        }
        .display-drawing-item {
          img {
            width: 100%;
          }
        }
        .display-drawing-item + .display-drawing-item {
          margin-left: 16px;
        }
      }
    }
  }
</style>
